<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/css/style.css">
<title>八维贴吧</title>
</head>
<script type="text/javascript">
   $(function(){//初始省市县
	   var provinceId='${LOGIN_USER.province.id}'; //要回显的省id
	   var cityId='${LOGIN_USER.city.id}';//要回显的市id
	   var countyId='${LOGIN_USER.county.id}';//要回显的县id
	   selectCitys(1,"province.id",provinceId);//初始化省
	   selectCitys(provinceId,"city.id",cityId);//初始化市
	   selectCitys(cityId,"county.id",countyId);//初始化县
   });
   
   function  selectCitys(pid,zjwz,hxid){//pid 父级id ，zjwz：查询的结果追加的位置  回显id
	  //清除以前数据
	  $("[name='county.id']").html("<option value=''>--请选择--</option>")
	  if(zjwz == 'city.id'){
		  $("[name='city.id']").html("<option value=''>--请选择--</option>")
	  }
	   //三级联动查询
	   $.post(
			   "${pageContext.request.contextPath}/selectCitys",
			   {'pid':pid},
			   function(obj){
		        for ( var i in obj) {
					$("[name='"+zjwz+"']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>")
				}
		        $("[name='"+zjwz+"']").val(hxid);
	   			},"json")
    }

</script>
<body>
	<!-- 包含header.jsp -->
	<jsp:include page="/WEB-INF/view/common/header.jsp" />

	<!-- ///////////////////////////////自己开发部分中间部分开始/////////////////////////// -->

	<div class="container border-1">
		<div class="row">

			<!-- 个人信息的左侧部分 -->
			<jsp:include page="/WEB-INF/view/my/left.jsp" />
			<!-- 中间部分 -->
			<div class="col10 bg-white" style="padding-left: 50px">
				<br/>
				  <form:form modelAttribute="user" id="userForm" action="${pageContext.request.contextPath}/update" method="post" enctype="multipart/form-data" >
                                   	<form:hidden path="id"/>
                                    <table class="table-borderless">
                                        <tbody><tr><td width="30%"> </td><td><span style="color: red">
                                          <form:errors path="*"></form:errors>
                                        </span></td></tr>
                                        <tr><td style="text-align: right">　　用户名：</td><td>${user.userName}</td></tr>
                                        <tr><td style="text-align: right"">昵称：</td><td><form:input  path="userName" /></td></tr>
                                         <tr><td style="text-align: right"> 头像：</td><td><input type="file" name="file"></td><td><img src="${user.imgurl}" width="100px" height="100px"></td></tr>
                                        <tr><td style="text-align: right">　生日：</td><td><form:input path="birthday" type="date"/></td></tr>
                                         <tr><td style="text-align: right">　性别：</td><td><form:radiobutton path="gender" label="男士"   value="MALE"/><form:radiobutton path="gender" label="女士"   value="FEMALE"/></td></tr>
                                        <tr><td style="text-align: right">  省：</td><td><select name="province.id" onchange="selectCitys(this.value,'city.id')"><option value="">--请选择--</option></select></td></tr>
                                        <tr><td style="text-align: right">  市：</td><td><select name="city.id" onchange="selectCitys(this.value,'county.id')"><option value="">--请选择--</option></select></td></tr>
                                        <tr><td style="text-align: right">  县：</td><td><select name="county.id"><option value="">--请选择--</option></select></td></tr>
                                        <tr><td> </td><td><button class="btn btn-danger">修改</button></td></tr>
                                    </tbody></table>
                   </form:form>
            <br>
			</div>
		</div>
	</div>




	<!-- ///////////////////////////////自己开发部分中间部分开始/////////////////////////// -->

	<!-- jsp包含尾部footer.jsp -->
	<jsp:include page="/WEB-INF/view/common/footer.jsp" />
</body>
</html>